<template>
  <view class="my-info">
    <!-- 导航栏 -->
    <nav-bar backUrl="/pages/my/my" :isTabbar="true"></nav-bar>
    <!-- 头像上传 -->
    <view>
      <view class="avatar-wrapper" @tap="chooseImage">
        <image class="avatar" :src="userInfo.avatarUrl || defaultAvatar" mode="aspectFill"></image>
        <text class="upload-text">上传头像</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-section">
      <!-- 微信昵称 -->
      <view class="form-item" @tap="showNicknamePopup">
        <text class="label">昵称</text>
        <view class="value-wrapper">
          <text class="value" :class="{'placeholder': !userInfo.nickname}">{{ userInfo.nickname || '请输入昵称' }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 真实姓名 -->
      <view class="form-item" @tap="showRealNamePopup">
        <text class="label">真实姓名</text>
        <view class="value-wrapper">
          <text class="value" :class="{'placeholder': !userInfo.realName}">{{ userInfo.realName || '请输入真实姓名' }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 性别 -->
      <view class="form-item" @tap="showGenderPicker">
        <text class="label">性别</text>
        <view class="value-wrapper">
          <text class="value placeholder">{{ userInfo.gender === 0 ? '男' : userInfo.gender === 1 ? '女' : '请选择' }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <text class="label">出生日期</text>
        <picker mode="date" :value="userInfo.birthday" :start="startDate" :end="endDate" @change="onDateChange">
          <view class="value-wrapper">
            <text class="value placeholder">{{ formatBirthday(userInfo.birthday) || '请选择' }}</text>
            <text class="arrow">></text>
          </view>
        </picker>
      </view>
      
      <!-- 手机号 -->
      <view class="form-item" @tap="showPhoneBindPopup">
        <text class="label">手机号</text>
        <view class="value-wrapper">
          <text class="value placeholder">{{ formatPhone(userInfo.phone) || '请绑定' }}</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-btn" @tap="saveUserInfo">
      <text>保存</text>
    </view>
    
    <!-- 昵称编辑弹窗 -->
    <view class="input-popup" v-if="showNickname">
      <view class="popup-mask" @tap="hideNicknamePopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">编辑昵称</text>
          <text class="popup-close" @tap="hideNicknamePopup">×</text>
        </view>
        <view class="popup-body">
          <view class="input-group">
            <input 
              class="text-input" 
              type="text" 
              v-model="nicknameValue" 
              placeholder="请输入昵称" 
              maxlength="20"
              focus
            />
          </view>
          <view class="confirm-btn" @tap="confirmNickname">确认</view>
        </view>
      </view>
    </view>
    
    <!-- 真实姓名编辑弹窗 -->
    <view class="input-popup" v-if="showRealName">
      <view class="popup-mask" @tap="hideRealNamePopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">编辑真实姓名</text>
          <text class="popup-close" @tap="hideRealNamePopup">×</text>
        </view>
        <view class="popup-body">
          <view class="input-group">
            <input 
              class="text-input" 
              type="text" 
              v-model="realNameValue" 
              placeholder="请输入真实姓名" 
              maxlength="10"
              focus
            />
          </view>
          <view class="confirm-btn" @tap="confirmRealName">确认</view>
        </view>
      </view>
    </view>
    
    <!-- 手机号绑定弹窗 -->
    <view class="phone-popup" v-if="showPhonePopup">
      <view class="popup-mask" @tap="hidePhoneBindPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">绑定手机号</text>
          <text class="popup-close" @tap="hidePhoneBindPopup">×</text>
        </view>
        <view class="popup-body">
          <view class="input-group">
            <input 
              class="phone-input" 
              type="number" 
              v-model="phoneForm.phone" 
              placeholder="请输入手机号" 
              maxlength="11"
            />
          </view>
          <view class="input-group verification-group">
            <input 
              class="verification-input" 
              type="number" 
              v-model="phoneForm.code" 
              placeholder="请输入验证码" 
              maxlength="6"
            />
            <view class="verification-btn" :class="{'disabled': countdown > 0}" @tap="sendVerificationCode">
              <text>{{ countdown > 0 ? `${countdown}秒后重发` : '获取验证码' }}</text>
            </view>
          </view>
          <view class="bind-btn" @tap="bindPhone">确认绑定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const defaultAvatar = ''
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      userInfo: {
        nickname: '',
        realName: '',
        avatarUrl: '',
        gender: null,
        birthday: '',
        phone: ''
      },
      // 弹窗状态
      showNickname: false,
      showRealName: false,
      nicknameValue: '',
      realNameValue: '',
      defaultAvatar,
      startDate: '',
      endDate: '',
      // 手机号绑定相关
      showPhonePopup: false,
      phoneForm: {
        phone: '',
        code: ''
      },
      countdown: 0,
      timer: null
    }
  },

  created() {
    // 初始化日期范围
    const currentDate = new Date()
    const minDate = new Date()
    minDate.setFullYear(currentDate.getFullYear() - 100) // 最小年龄限制100岁
    const maxDate = new Date()
    maxDate.setFullYear(currentDate.getFullYear() - 1) // 最大年龄限制1岁

    this.startDate = minDate.toISOString().split('T')[0]
    this.endDate = maxDate.toISOString().split('T')[0]
  },

  onLoad() {
    this.loadUserInfo()
  },
  
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 加载用户信息
    async loadUserInfo() {
      try {
        const memberId = uni.getStorageSync('memberId') // 从本地存储获取用户ID
        if (!memberId) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }

        const res = await uni.request({
          url: `${uni.$config.baseUrl}/member/member/${memberId}`,
          method: 'GET'
        })

        if (res.statusCode === 200 && res.data.code === 200) {
          this.userInfo = res.data.data
        } else {
          throw new Error(res.data.msg || '获取用户信息失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '获取用户信息失败',
          icon: 'none'
        })
      }
    },

    // 选择图片并上传
    async chooseImage() {
      try {
        // 选择图片
        const res = await new Promise((resolve, reject) => {
          // #ifdef H5
          // H5环境下使用input元素选择文件
          const input = document.createElement('input');
          input.type = 'file';
          input.accept = 'image/*';
          input.style.display = 'none';
          document.body.appendChild(input);
          
          input.onchange = (e) => {
            const file = e.target.files[0];
            if (file) {
              resolve({ tempFilePaths: [file] });
            } else {
              reject(new Error('未选择文件'));
            }
            document.body.removeChild(input);
          };
          
          input.click();
          // #endif
          
          // #ifdef APP-PLUS || MP
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: (res) => resolve(res),
            fail: (err) => reject(err)
          });
          // #endif
        });
        
        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
          uni.showLoading({
            title: '上传中...'
          });
          
          // 获取用户ID
          const memberId = uni.getStorageSync('memberId');
          if (!memberId) {
            throw new Error('请先登录');
          }
          
          // 上传图片
          const uploadRes = await new Promise((resolve, reject) => {
            // #ifdef H5
            // H5环境下使用XMLHttpRequest上传
            const xhr = new XMLHttpRequest();
            const formData = new FormData();
            formData.append('file', res.tempFilePaths[0]);
            formData.append('id', memberId);
            
            xhr.open('POST', `${uni.$config.baseUrl}/member/member/uploadAvatar`, true);
            
            // 添加token等认证信息
            const token = uni.getStorageSync('token');
            if (token) {
              xhr.setRequestHeader('Authorization', token);
            }
            
            xhr.onload = function() {
              if (xhr.status >= 200 && xhr.status < 300) {
                try {
                  const response = JSON.parse(xhr.responseText);
                  resolve({ data: response });
                } catch (e) {
                  reject(new Error('解析响应失败'));
                }
              } else {
                reject(new Error('上传失败: ' + xhr.status));
              }
            };
            
            xhr.onerror = function() {
              reject(new Error('网络错误'));
            };
            
            xhr.send(formData);
            // #endif
            
            // #ifdef APP-PLUS || MP
            // 非H5环境使用uni.uploadFile
            uni.uploadFile({
              url: `${uni.$config.baseUrl}/member/member/uploadAvatar`,
              filePath: res.tempFilePaths[0],
              name: 'file',
              formData: {
                id: memberId
              },
              success: (res) => resolve(res),
              fail: (err) => reject(err)
            });
            // #endif
          });
          
          // 处理上传结果
          let uploadData;
          // #ifdef H5
          uploadData = uploadRes.data;
          // #endif
          
          // #ifdef APP-PLUS || MP
          uploadData = JSON.parse(uploadRes.data);
          // #endif
          
          if (uploadData.code === 200) {
            // 更新用户信息中的头像URL
            this.userInfo.avatarUrl = uploadData.data.avatarUrl;
            
            // 更新本地存储的用户信息
            const userInfoStr = uni.getStorageSync('userInfo');
            const userInfo = userInfoStr;
            userInfo.avatarUrl = uploadData.data.avatarUrl;
            uni.setStorageSync('userInfo', userInfo);
            
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } else {
            throw new Error(uploadData.msg || '上传失败');
          }
        }
      } catch (err) {
        console.error('上传头像失败:', err);
        uni.showToast({
          title: err.message || '上传失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 显示性别选择器
    showGenderPicker() {
      uni.showActionSheet({
        itemList: ['男', '女'],
        success: (res) => {
          this.userInfo.gender = res.tapIndex
        }
      })
    },

    // 格式化生日显示
    formatBirthday(birthday) {
      if (!birthday) return ''
      return birthday.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1年$2月$3日')
    },
    
    // 格式化手机号显示
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    // 显示手机号绑定弹窗
    showPhoneBindPopup() {
      this.showPhonePopup = true
      this.phoneForm.phone = this.userInfo.phone || ''
      this.phoneForm.code = ''
    },
    
    // 隐藏手机号绑定弹窗
    hidePhoneBindPopup() {
      this.showPhonePopup = false
      this.phoneForm.phone = ''
      this.phoneForm.code = ''
    },
    
    // 发送验证码
    async sendVerificationCode() {
      // 如果倒计时中，不允许再次发送
      if (this.countdown > 0) return
      
      // 验证手机号格式
      if (!this.phoneForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1\d{10}$/.test(this.phoneForm.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '发送中...'
        })
        
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/member/member/sendSmsCode`,
          method: 'POST',
          data: {
            phoneNumber: this.phoneForm.phone
          }
        })
        
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          })
          
          // 开始倒计时
          this.countdown = 60
          this.timer = setInterval(() => {
            this.countdown--
            if (this.countdown <= 0) {
              clearInterval(this.timer)
            }
          }, 1000)
        } else {
          throw new Error(res.data.msg || '发送失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '发送失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 绑定手机号
    async bindPhone() {
      // 验证手机号格式
      if (!this.phoneForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1\d{10}$/.test(this.phoneForm.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      
      // 验证验证码
      if (!this.phoneForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      
      if (!/^\d{6}$/.test(this.phoneForm.code)) {
        uni.showToast({
          title: '验证码格式不正确',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '绑定中...'
        })
        
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/member/member/bindPhone`,
          method: 'POST',
          data: {
            memberId: uni.getStorageSync('memberId'),
            phone: this.phoneForm.phone,
            code: this.phoneForm.code
          }
        })
        
        if (res.statusCode === 200 && res.data.code === 200) {
          // 更新用户信息中的手机号
          this.userInfo.phone = this.phoneForm.phone
          
          // 更新本地存储的用户信息
          const userInfoStr = uni.getStorageSync('userInfo')
          const userInfo = userInfoStr
          userInfo.phone = this.phoneForm.phone
          uni.setStorageSync('userInfo', userInfo)
          
          uni.showToast({
            title: '绑定成功',
            icon: 'success'
          })
          
          // 关闭弹窗
          this.hidePhoneBindPopup()
        } else {
          throw new Error(res.data.msg || '绑定失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '绑定失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 保存用户信息
    async saveUserInfo() {
		
      if (!this.userInfo.nickname) {
        uni.showToast({
          title: '请输入微信昵称',
          icon: 'none'
        })
        return
      }

      if (!this.userInfo.realName) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        })
        return
      }

      if (this.userInfo.gender === null) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }

      if (!this.userInfo.birthday) {
        uni.showToast({
          title: '请选择出生日期',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({
          title: '保存中...',
          mask: true
        })

        const res = await uni.request({
          url: `${uni.$config.baseUrl}/member/member`,
          method: 'Put',
          header: {
            'Content-Type': 'application/json'
          },
          data: this.userInfo
        })
		
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })

          const userInfoStr = uni.getStorageSync('userInfo')
          const userInfo = userInfoStr
          userInfo.avatarUrl = this.userInfo.avatarUrl
		  userInfo.nickname = this.userInfo.nickname
		  userInfo.realName = this.userInfo.realName
		  userInfo.gender = this.userInfo.gender
		  userInfo.birthday = this.userInfo.birthday
          uni.setStorageSync('userInfo', userInfo)
          
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/my/my'
            })
          }, 1500)
        } else {
          throw new Error(res.data.msg || '保存失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '保存失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 跳转到完善信息页面
    navigateToMyInfo() {
      uni.switchTab({
        url: '/pages/my-info/my-info'
      })
    },

    // 处理日期选择
    onDateChange(e) {
      const value = e.detail.value
      if (value) {
        this.userInfo.birthday = value
      }
    },

    // 显示昵称编辑弹窗
    showNicknamePopup() {
      this.showNickname = true
      this.nicknameValue = this.userInfo.nickname || ''
    },

    // 隐藏昵称编辑弹窗
    hideNicknamePopup() {
      this.showNickname = false
    },

    // 确认昵称
    confirmNickname() {
      if (!this.nicknameValue.trim()) {
        uni.showToast({
          title: '昵称不能为空',
          icon: 'none'
        })
        return
      }
      this.userInfo.nickname = this.nicknameValue.trim()
      this.hideNicknamePopup()
    },

    // 显示真实姓名编辑弹窗
    showRealNamePopup() {
      this.showRealName = true
      this.realNameValue = this.userInfo.realName || ''
    },

    // 隐藏真实姓名编辑弹窗
    hideRealNamePopup() {
      this.showRealName = false
    },

    // 确认真实姓名
    confirmRealName() {
      if (!this.realNameValue.trim()) {
        uni.showToast({
          title: '真实姓名不能为空',
          icon: 'none'
        })
        return
      }
      this.userInfo.realName = this.realNameValue.trim()
      this.hideRealNamePopup()
    }
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器占满整个视口高度 */
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  margin: 30rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

.avatar {
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  margin-bottom: 24rpx;
  border: 4rpx solid #f0f0f0;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
}

.upload-text {
  font-size: 34rpx;
  color: #2B87FF;
  font-weight: 500;
  margin-top: 12rpx;
}

.my-info {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 150rpx;

  .nav-header {
    background: #FFFFFF;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: relative;

    .back-icon {
      padding: 20rpx;
      margin-left: -20rpx;

      .icon {
        font-size: 36rpx;
        color: #333;
      }
    }

    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }

    .right-btn {
      padding: 10rpx 20rpx;
      background: #E4393C;
      border-radius: 30rpx;
      
      text {
        font-size: 28rpx;
        color: #FFFFFF;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }

  .form-section {
    background: #FFFFFF;
    margin: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;

    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 36rpx 40rpx;
      border-bottom: 1rpx solid #EEEEEE;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 36rpx;
        color: #333;
        font-weight: 500;
        width: 200rpx;
      }

      .value-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .value {
          font-size: 36rpx;
          color: #333;
          margin-right: 24rpx;

          &.placeholder {
            color: #999;
          }
        }

        .arrow {
          font-size: 36rpx;
          color: #999;
          margin-left: 12rpx;
        }
      }
    }
  }

  .save-btn {
    position: fixed;
    left: 40rpx;
    right: 40rpx;
    bottom: 40rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #42A5F5, #1976D2);
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10rpx 20rpx rgba(43, 135, 255, 0.3);
    transition: all 0.3s;

    text {
      font-size: 38rpx;
      color: #FFFFFF;
      font-weight: 600;
      letter-spacing: 4rpx;
    }

    &:active {
      transform: scale(0.98);
      box-shadow: 0 6rpx 10rpx rgba(43, 135, 255, 0.2);
    }
  }
  
  /* 手机号绑定弹窗样式 */
  .phone-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    
    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
    }
    
    .popup-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 650rpx;
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
      
      .popup-header {
        padding: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #eee;
        
        .popup-title {
          font-size: 38rpx;
          font-weight: 600;
          color: #333;
        }
        
        .popup-close {
          font-size: 48rpx;
          color: #999;
          padding: 10rpx;
          line-height: 1;
        }
      }
      
      .popup-body {
        padding: 40rpx;
        
        .input-group {
          margin-bottom: 36rpx;
          
          .phone-input, .verification-input {
            width: 100%;
            height: 100rpx;
            background-color: #f5f5f5;
            border-radius: 16rpx;
            padding: 0 30rpx;
            font-size: 36rpx;
          }
        }
        
        .verification-group {
          display: flex;
          
          .verification-input {
            flex: 1;
            margin-right: 24rpx;
          }
          
          .verification-btn {
            width: 220rpx;
            height: 100rpx;
            background-color: #2B87FF;
            color: #fff;
            font-size: 32rpx;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            transition: all 0.3s;
            
            &:active {
              transform: scale(0.98);
            }
            
            &.disabled {
              background-color: #ccc;
            }
          }
        }
        
        .bind-btn {
          margin-top: 50rpx;
          height: 100rpx;
          background: linear-gradient(135deg, #42A5F5, #1976D2);
          color: #fff;
          font-size: 36rpx;
          font-weight: 600;
          border-radius: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6rpx 16rpx rgba(43, 135, 255, 0.3);
          transition: all 0.3s;
          
          &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 8rpx rgba(43, 135, 255, 0.2);
          }
        }
      }
    }
  }

  /* 通用输入弹窗样式 */
  .input-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    
    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
    }
    
    .popup-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-radius: 30rpx 30rpx 0 0;
      overflow: hidden;
      box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
      animation: slideUp 0.3s ease-out;
      
      .popup-header {
        padding: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #eee;
        
        .popup-title {
          font-size: 38rpx;
          font-weight: 600;
          color: #333;
        }
        
        .popup-close {
          font-size: 48rpx;
          color: #999;
          padding: 10rpx;
          line-height: 1;
        }
      }
      
      .popup-body {
        padding: 40rpx;
        
        .input-group {
          margin-bottom: 36rpx;
          
          .text-input {
            width: 100%;
            height: 100rpx;
            background-color: #f5f5f5;
            border-radius: 16rpx;
            padding: 0 30rpx;
            font-size: 36rpx;
          }
        }
        
        .confirm-btn {
          height: 100rpx;
          background: linear-gradient(135deg, #42A5F5, #1976D2);
          color: #fff;
          font-size: 36rpx;
          font-weight: 600;
          border-radius: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6rpx 16rpx rgba(43, 135, 255, 0.3);
          transition: all 0.3s;
          
          &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 8rpx rgba(43, 135, 255, 0.2);
          }
        }
      }
    }
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
</style> 